<template>
  <div class="manager">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav3()"><a><em class="before"></em><span>预算编制</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">制定目标</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--表格-->
    <div class="container content mt-4">
      <div class="row">
        <div class="col-12  font-weight-bold text-secondary mb-3 mt-2 text-center">
          设置目标（单位：元）
        </div>
      </div>
      <table class="table table-hover table-bordered table-striped" style="table-layout:fixed;">
        <thead class="">
          <tr>
            <th rowspan="2">项目名称</th>
            <th colspan="1">年度目标:</th>
            <td colspan="1">1月</td>
            <td colspan="1">2月</td>
            <td colspan="1">3月</td>
            <td colspan="1">4月</td>
            <td colspan="1">5月</td>
            <td colspan="1">6月</td>
            <td colspan="1">7月</td>
            <td colspan="1">8月</td>
            <td colspan="1">9月</td>
            <td colspan="1">10月</td>
            <td colspan="1">11月</td>
            <td colspan="1">12月</td>
            <td colspan="1">操作</td>
          </tr>
        </thead>
        <tbody>
          <!--<tr class="project-tr">-->
            <!--<td rowspan="1" colspan="1"></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text"/></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td colspan="1"><input type="text" /></td>-->
            <!--<td><el-button type="success"  size="mini">提交</el-button></td>-->
          <!--</tr>-->
            <tr class="project-tr" v-for="item in targetList">
              <td rowspan="1" colspan="1">{{item.content}}</td>
              <td colspan="1"><input type="text" v-model="item.amount_goal"/></td>
              <td colspan="1"><input type="text" v-model="item.month1"/></td>
              <td colspan="1"><input type="text" v-model="item.month2"/></td>
              <td colspan="1"><input type="text" v-model="item.month3"/></td>
              <td colspan="1"><input type="text" v-model="item.month4"/></td>
              <td colspan="1"><input type="text" v-model="item.month5"/></td>
              <td colspan="1"><input type="text" v-model="item.month6"/></td>
              <td colspan="1"><input type="text" v-model="item.month7"/></td>
              <td colspan="1"><input type="text" v-model="item.month8"/></td>
              <td colspan="1"><input type="text" v-model="item.month9"/></td>
              <td colspan="1"><input type="text" v-model="item.month10"/></td>
              <td colspan="1"><input type="text" v-model="item.month11"/></td>
              <td colspan="1"><input type="text" v-model="item.month12"/></td>
              <td><el-button type="success" @click="save(item)" size="mini">提交</el-button></td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'budget',
  data () {
    return {
      isClick:6,
      targetList: []
    }
  },
  created() {
    this.getTargetList()
  },
  methods: {
    gotoHome(){
      this.$router.push("/index");
    },
    //跳转到书吧
    gotoNav: function(){
      this.$router.push("/nav2");
    },
    gotoNav3: function(){
      this.$router.push("/nav3");
    },
    getTargetList() {
      this.$http.get(
        '/api/getTargetList',
        {
          params: {
            type: '3'
          }
        }).then(res => {
          this.targetList = res.data
      })
    },
    save(item) {
      let data = JSON.stringify(item)
      this.$http.post(
        '/api/save',
        data, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
        this.$message({
          type: "success",
          message: '保存成功'
        })
      })
    }
  }
}
</script>

<style scoped>
  tr{
    text-align: center;
  }
  .project-tr input {
    width: 100%;
    border: none;
    background: transparent;
  }
  .project-tr input:focus {
    outline: none;
  }
</style>
